import React from 'react'
import { renderRoutes } from 'react-router-config'
import { TopBar, Tab, TabItem } from './style'
import { NavLink } from 'react-router-dom' // 路由转跳
import Player from '../Player/index'

function Home(props) {
  const { route } = props

  return (
    <div>
      <TopBar>
        <span className="iconfont menu">&#xe682;</span>
        <span className="title" title="网易云音乐">
          网易云音乐
        </span>
        <span className="iconfont">&#xe672;</span>
      </TopBar>
      <Tab>
        <NavLink to="/recommend" activeClassName="selected">
          <TabItem>
            <span>推荐</span>
          </TabItem>
        </NavLink>
        <NavLink to="/singers" activeClassName="selected">
          <TabItem>
            <span>歌手</span>
          </TabItem>
        </NavLink>
        <NavLink to="/rank" activeClassName="selected">
          <TabItem>
            <span>排行榜</span>
          </TabItem>
        </NavLink>
      </Tab>
      {renderRoutes(route.routes)}
      <Player></Player>
    </div>
  )
}

export default React.memo(Home)
